<template>
  <div id="plan">
    <div class="speed">
      <div class="right"><span class="md">{{now+1}}</span><span>/{{allcount}}</span></div>
      <div class="clear"></div>
    </div>
    <div class="word">
      <h2>{{nform}}</h2>
      <div>
        <p>释义:</p>
        <p class="explan">
          {{nmeaning}}
        </p>
      </div>
    </div>
    <div class="music">
      学习模式
      <img src="../assets/images/sound.png" alt="">
      <audio id="music" :src="nsrc" autoplay="true">
        <source  type="audio/mp3">
      </audio>
    </div>

    <div id="autoPlay" @click="beginStudy"  v-show="autoPlay">
      <div class="top">
        <p class="text-size-md">学习模式</p>
        <p class="text-size-lg">单词会自动播放</p>
        <p>请用心记忆</p>
      </div>

      <div class="go text-size-lg">
        GO
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

  export default{
    name:'plan',
    data(){
      return{
        nform:'',
        nipa:'',
        nmeaning:'',
        nsrc:'',
        now:0,
        allcount:'12',
        autoPlay:true,
        forms:[],
        returnPlay:0
      }
    },
    methods:{
      beginStudy:function(){
        this.autoPlay = false;
        this.palyreturn();
      },
      palyreturn:function(){
        this.nform = this.forms[this.now].form;
//        this.nipa = this.forms[this.now].;
        this.nmeaning = this.forms[this.now].meaning;
        this.nsrc = this.forms[this.now].nsrc;
        console.log(this.nsrc);
        var audio = document.getElementById('music');
//        audio.src = this.forms[this.now].nsrc;
        setInterval(()=>{
          if(this.returnPlay <2 && audio.ended == true){
          audio.play();
          this.returnPlay++;
          }
        },1500)
      }

    },
    beforeMount:function(){
      this.forms = [];
    },
    mounted:function(){
      var xmlhttp,state;
      xmlhttp = new XMLHttpRequest()
      xmlhttp.onreadystatechange=function () {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
          state = JSON.parse(xmlhttp.responseText).data;
        }else{

        }
      }
      xmlhttp.open('GET','/api/words',false);
      xmlhttp.send();
      for(let i in state){
        this.forms.push(state[i]);
      }
      this.allcount = state.length;
    },
    watch:{
      returnPlay:function(val,oldval){
        if(val == 2){
          setTimeout(() => {
            if(this.now < this.allcount-1){
              this.now++;
              this.returnPlay = 0;
              this.palyreturn();
            }else{
              this.$router.push({path:'planShow'})
            }
          },5000)
        }
      }
    }
  }

</script>

<style scoped lang="less">
  @import '../assets/css/variables.less';
  #plan{
    padding:30px 20px;
    position: relative;
  }
  div.speed{
    /*float:right;*/
  }
  div.speed div.right{
    float:right;
  }
  .clear{clear:both;}
  div.word{
    margin:100px 0;
  }
  div.word h2{
    /*text-align: center;*/
    color:@orange;
    font-size:300%;
  }
  div.word div{
    margin:30px 0;
  }
  .explan{
    text-indent: 2em;
  }
  div.music{
    box-sizing: border-box;
    width:100%;
    position:fixed;
    bottom:20px;
    right:0;
    padding:10px 20px;
    line-height:67px;
  }
  div.music img{
    float:right;
  }
  #autoPlay{
    color:@white;
    text-align:center;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:@gray-dark;
    opacity: .9;
  }
  #autoPlay p{
    margin:15px 0;
  }
  #autoPlay div.top{
    margin:200px 0;
  }
  #autoPlay div.go{
    width:100%;
    text-align: center;
    position:absolute;
    bottom:50px;
  }
</style>
